<template>
  <view class="lianliankan">
    <template v-if="!isOver">
      <view class="time">
        <text>计时：</text>
        <text>{{ minuteNumber }}:{{ secondNumber }}</text>
      </view>
      <view class="game english" v-if="englishWordList.length > 0">
        <view
          class="game_container"
          v-for="(item, index) in englishWordList"
          :key="index"
        >
          <view
            class="game_content"
            :class="{
              active: currentEnglishIndex === index,
              animate__animated:
                currentEnglishIndex === index || item.isCorrect,
              animate__faster: currentEnglishIndex === index,
              animate__rubberBand: currentEnglishIndex === index,
              animate__fadeOut: item.isCorrect,
            }"
            @click="chooseEnglish(item, index)"
          >
            <view class="game_span">
              <text>{{ item.word }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="game chinese" v-if="chineseWordList.length > 0">
        <view
          class="game_container"
          v-for="(item, index) in chineseWordList"
          :key="index"
        >
          <view
            class="game_content"
            :class="{
              active: currentChineseIndex === index,
              animate__animated:
                currentChineseIndex === index || item.isCorrect,
              animate__faster: currentChineseIndex === index,
              animate__rubberBand: currentChineseIndex === index,
              animate__fadeOut: item.isCorrect,
            }"
            @click="chooseChinese(item, index)"
          >
            <view class="game_span">
              <text>{{ item.wordParaphrase }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="game_popup" v-show="isShowPopup">
        <view
          class="game_popup_content1 animate__animated animate__faster animate__fadeOutUp"
        >
          <!-- <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/jia.png"
            mode="widthFix"
          ></image> -->
        </view>
        <view class="game_popup_content2 zoomIn">
          <!-- <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/sha.png"
            mode="widthFix"
          ></image> -->
        </view>
      </view>
    </template>
    <view class="info" v-else>
      <view class="info_title">
        <image
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/game_over.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="info_container">
        <view class="info_list">
          <view class="info_content">
            <text class="active">{{ clickCount }}</text>
            <text>总点击数</text>
          </view>
          <view class="info_content">
            <text class="active">{{ clickCorrect }}</text>
            <text>点对次数</text>
          </view>
          <view class="info_content">
            <text class="active">{{ clickError }}</text>
            <text>点错次数</text>
          </view>
          <view class="info_content">
            <text class="active">{{ countdown }}</text>
            <text>用时/秒</text>
          </view>
        </view>
        <view class="info_list">
          <view class="info_content">
            <text class="active">{{ accuracy }}%</text>
            <text>正确率</text>
          </view>
        </view>
        <view class="info_gold">
          <view class="info_gold_img">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/gold_img.png"
              mode="widthFix"
              style="width:52rpx;"
            ></image>
          </view>
          <view class="info_gold_img">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/gold_text.png"
              mode="widthFix"
              style="width:162rpx;"
            ></image>
          </view>
          <view class="info_gold_text"> +{{ goldNum }} </view>
        </view>
        <view class="info_button" @click="practiceAgain()">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/game_button.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { gameBonus } from "@/api/student";
import { arrayRandomly } from "@/libs/tools";
export default {
  props: {
    wordList: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    this.init();
  },
  watch: {
    wordList() {
      if (this.isUpdate) {
        this.initData();
        this.init();
      }
    },
  },
  data() {
    return {
      englishWordList: [],
      chineseWordList: [],
      wordNumber: 0,
      clickCount: 0,
      clickCorrect: 0,
      clickError: 0,
      accuracy: 0,
      countdown: 0,
      goldNum: 0,
      minute: 3,
      minuteNumber: "03",
      second: 0,
      secondNumber: "00",
      timerId: null,
      currentEnglishIndex: -1,
      currentChineseIndex: -1,
      currentEnglishId: 0,
      currentChineseId: 0,
      audio: null,
      innerAudioContext: null,
      isPlaying: false,
      isOver: false,
      isUpdate: false,
      isShowPopup: false,
    };
  },
  methods: {
    init() {
      this.englishWordList = this.wordList;
      this.chineseWordList = arrayRandomly([...this.wordList]);
      this.wordNumber = this.wordList.length;
      this.timer();
      this.playAudio();
    },
    initData() {
      this.clickCount = 0;
      this.clickCorrect = 0;
      this.clickError = 0;
      this.accuracy = 0;
      this.goldNum = 0;
      this.countdown = 0;
      this.minute = 3;
      this.minuteNumber = "03";
      this.second = 0;
      this.secondNumber = "00";
      this.currentEnglishIndex = -1;
      this.currentChineseIndex = -1;
      this.isOver = false;
      this.isUpdate = false;
      if (this.timerId) {
        clearInterval(this.timerId);
      }
    },
    playAudio() {
      this.innerAudioContext = uni.createInnerAudioContext();
      this.innerAudioContext.autoplay = true;
      this.innerAudioContext.loop = true;
      this.innerAudioContext.src =
        "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/audio/bg_music.mp3";
      this.innerAudioContext.onPlay(() => {
        console.log("开始播放");
      });
      this.innerAudioContext.onError((res) => {
        console.log(res.errMsg);
        console.log(res.errCode);
      });
    },
    stopAudio() {
      this.innerAudioContext.stop();
    },
    chooseEnglish(item, index) {
      this.clickCount++;
      this.currentEnglishIndex = index;
      this.currentEnglishId = item.id;
      if (this.currentEnglishId !== 0 && this.currentChineseId !== 0) {
        this.checkRightAndWrong(item, 1);
      }
    },
    chooseChinese(item, index) {
      this.clickCount++;
      this.currentChineseIndex = index;
      this.currentChineseId = item.id;
      if (this.currentChineseId !== 0 && this.currentEnglishId !== 0) {
        this.checkRightAndWrong(item, 2);
      }
    },
    checkRightAndWrong(item, type) {
      if (this.currentEnglishId === this.currentChineseId) {
        this.currentEnglishId = 0;
        this.currentChineseId = 0;
        this.$set(item, "isCorrect", true);
        if (type === 1) {
          this.$set(
            this.chineseWordList[this.currentChineseIndex],
            "isCorrect",
            true
          );
        } else if (type === 2) {
          this.$set(
            this.englishWordList[this.currentEnglishIndex],
            "isCorrect",
            true
          );
        }
        this.clickCorrect++;
        this.play(true);
        this.isShowPopup = true;
        setTimeout(() => {
          this.isShowPopup = false;
        }, 500);
        if (this.clickCorrect === this.wordNumber) {
          this.gameOver();
        }
      } else {
        this.currentEnglishId = 0;
        this.currentChineseId = 0;
        this.currentEnglishIndex = -1;
        this.currentChineseIndex = -1;
        this.clickError++;
        this.play(false);
      }
    },
    gameOver() {
      clearInterval(this.timerId);
      if (this.clickCount > 0) {
        this.accuracy = (
          (((this.clickCorrect * 2) / this.clickCount) * 10000) /
          100
        ).toFixed(2);
        if (this.accuracy >= 80 && this.clickCorrect === this.wordNumber) {
          this.addGold();
        }
      }
      this.isOver = true;
    },
    play(flag) {
      if (this.isPlaying) return;
      this.audio = uni.createInnerAudioContext();
      if (flag) {
        this.audio.src =
          "https://pc.abczxs.com/edcSystem/web/web2/images/xaiochuyinxiao.mp3";
      } else {
        this.audio.src =
          "https://pc.abczxs.com/edcSystem/web/web2/images/false.mp3";
      }
      this.audio.play();
      this.audio.onEnded(() => {
        this.isPlaying = false;
        this.innerAudioContext.play();
      });
      this.isPlaying = true;
    },
    timer() {
      this.timerId = setInterval(() => {
        this.second--;
        if (this.second < 0) {
          this.second = 59;
          this.minute--;
        }
        if (this.minute < 0) {
          this.gameOver();
          return;
        }
        if (this.second < 10) {
          this.secondNumber = this.second.toString().padStart(2, "0");
        } else {
          this.secondNumber = this.second.toString();
        }
        if (this.minute < 10) {
          this.minuteNumber = this.minute.toString().padStart(2, "0");
        } else {
          this.minuteNumber = this.minute.toString();
        }
        this.countdown++;
      }, 1000);
    },
    practiceAgain() {
      this.isUpdate = true;
      this.$emit("init");
    },
    addGold() {
      gameBonus().then((res) => {
        this.goldNum = res.data.goldNum;
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./LianLianKan";
</style>
